<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<jsp:include page="/bannerServlet?method=selectAll"></jsp:include>
	<div>
		<header class="header-article-list">
			<h1>在线留言</h1>

		</header>
		<div>
			<div style="text-align: center;">
				<br>
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"><span style="color: red;">*</span>姓名</label>
							<div class="layui-input-inline">
								<input style="width: 350px;" type="text" name="name" id="name"
									required lay-verify="required" placeholder="请输入姓名"
									autocomplete="off" class="layui-input"
									style="text-align: center;">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"><span style="color: red;">*</span>电话</label>
							<div class="layui-input-inline">
								<input style="width: 350px;" type="text" name="tel" required
									lay-verify="required" placeholder="请输入电话" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"><span style="color: red;">*</span>邮箱</label>
							<div class="layui-input-inline">
								<input style="width: 350px;" type="email" name="email" required
									lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
									class="layui-input">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label"><span style="color: red;">*</span>内容</label>
							<div class="layui-input-inline">
							 <textarea style="width: 350px;" name="neiRong" placeholder="请输入内容" class="layui-textarea"></textarea>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
			<script>
				//加载layui的form模块
				layui.use('form', function() {
					var form = layui.form;
					var $ = layui.jquery; //引入jquery
					//监听提交
					form.on('submit(formDemo)', function(data) {
						//8ee9f6a8-d4a8-446e-930e-50af1528251c
						var d = data.field; //表单中的数据，定义一个参数来接收
						d.method = "add";//执行方法
						//通过ajax想数据库提交数据
						console.log(d); //提交之前的一个数据验证，通过打印的方式判断一下这个数据
						var url = 'MessageServlet';
						//    				ajax请求
						$.post(url, d, function(data) {
							if (data.count > 0) {
								layer.msg('添加成功');
								window.location.reload();//刷新页面
							}
						}, "json");
						return false;
					});
				});
			</script>
		</div>
	</div>
	<jsp:include page="/homeInfoServlet?method=selectAll"></jsp:include>
</body>
</html>